<template>
  <el-input class="vpd-input" :type="val.inputType"
            v-model="val.value"
            :placeholder="val.placeholder"
            :maxlength="val.maxlength"
            :minlength="val.minlength"
            :clearable="val.clearable"
            :max="val.max"
            :min="val.min"
            :style="{
          width: val.w + 'px',
          height: val.h + 'px',
       }"
  >
    <template slot="prepend" v-if="val.prependText">{{val.prependText}}</template>
    <template slot="append" v-if="val.appendText">{{val.appendText}}</template>
  </el-input>
</template>
<script>
  import StylePane from './style.vue'
  import dataMixin from '../mixins/data';

  const NAME = 'vpd-input';
  export default {
    mixins: [dataMixin],
    name: NAME,
    icon: 'vpd-input',
    title: '输入框',
    panel: StylePane,
    setting: {
      type: NAME,
      inputType: 'text',
      placeholder: '',
      maxlength: 9999,
      minlength: 0,
      max: null,
      min: null,
      clearable: false,
      prependText: '',
      appendText: '',

      x: 0,
      y: 0,
      w: 100,
      h: 32,
      minWidth: 50,
      minHeight: 30,
    },
    props: {
      val: {
        type: Object
      }
    },
    data() {
      return {
        value: ''
      }
    },
    computed: {},
    watch: {
      // 'val.h': function (h) {
      //   this.updateInnerInput(h);
      // },
    },
    mounted() {
      // this.updateInnerInput();
    },
    methods: {
      updateInnerInput(h) {
        h = h || this.val.h;
        this.$el.querySelector('input').style.height = h + 'px';
      },
      updateData(data) {
        this.val.value = data;
      },
      getValue() {
        return this.val.value;
      }
    }
  }
</script>
<style>
  .vpd-input input {
    height: 100% !important;
  }
</style>
